<template>
	<div class="styleMain">
		<div style="width: 100%;">
			<div class="styleTitle">选择图片点击按钮进行图片风格转化<a-button style="margin-left: 20px;margin-right: 20px;" :loading="!btm"  @click="styleChange">转换</a-button>
			<a-select  ref="select" v-model:value="value1"
					style="width: 120px" :options="options1" @focus="focus" @change="handleChange"></a-select></div>
			<a-row>
				<a-col :span="12" class="mainCol">
					<div class="upLoadImg" @click="insert">
						<img v-show="inputSrc==''" class="styleImg" src="../assets/cil-image-plus.svg" style="opacity: 0.3;"/>
						<img v-show="inputSrc!=''" class="styleImg" :src="inputSrc"/>
					</div>
				</a-col>
				<a-col :span="12" class="mainCol">
					<div class="backImg">
            <img v-show="backImg!=''" class="styleImg" :src="backImg+ Date.now()"/>
					</div>
				</a-col>
			</a-row>
      <div class="styleBottom">
        <a-button style="margin-left: 20px;margin-right: 20px;" @click="download">保存至本地</a-button>
        <a-button style="margin-left: 20px;margin-right: 20px;" @click="inputName=true">保存至个人素材</a-button>
      </div>
		</div>
		<Modal v-model="showModal" title="请选择" @on-ok="insertImgFile" @on-cancel="showModal = false,imgFile = null ">
			<Upload :before-upload="handleUpload" action="#">
				<Button icon="ios-cloud-upload-outline">选择图片文件</Button>
			</Upload>
      <img class="uploadImg" :src="imgFile" />

<!--			<Input v-model="imgName" placeholder="请输入素材名称"></Input>-->
		</Modal>
    <a-modal v-model:open="inputName" title="输入名称" @ok="saveFootage">
      <div>svg素材不能有背景图片</div>
      <a-input v-model:value="imgName"/>
    </a-modal>
	</div>
</template>
<script>
	import {
		getImgStr
	} from '@/utils/utils';
	export default {
		data() {
			return {
				value1: '1',
				inputSrc: "",
        backImg: "",
        type: "",
        imgFile:"",
        imgName:"",
        btm: true,
        inputName: false,
        showModal: false,
				options1: [{
						value: '1',
						label: '人脸动漫画',
					},
					{
						value: '2',
						label: '宫崎骏画风',
					},
					{
						value: '3',
						label: '油画',
					},
					{
						value: '4',
						label: '人脸油画分格',
					},
				],
				
		};
	},
	methods: {
		insert() {
			this.imgFile = ''
			this.showModal = true
		},
		insertImgFile() {
			const imgEl = document.createElement('img');
			imgEl.src = this.imgFile
			// 插入页面
			// document.body.appendChild(imgEl);

		},
		// 选择文件
		handleUpload(file) {
      this.type = file.name.replace(/.+\./, "");
      if (this.type == "png" || this.type == 'jpg') {

      getImgStr(file).then(res => {
        this.imgFile = res
        this.inputSrc = res
      })
      }else {
        confirm("请上传png或jpg文件")
      }
			return false;
		},
		focus(){
			console.log("focus")
		},
    styleChange(){
      if(this.$store.state.token == ""){
        confirm("请先登录")
        return
      }
      this.btm = false
      if(this.inputSrc!="") {
        console.log('1111111111111111')
        console.log(this.inputSrc)
        this.backImg = ""
        this.$http.post(
            'api/styleChange/st/',
            {
              token: this.$store.state.token,
              img: this.inputSrc,
              type: this.type,
              value: this.value1,
            }).then(res => {
              console.log(res)

              this.backImg = 'api/' + res.data.data.backImg + '?'
              this.btm = true
            }
        )
      }else{
        confirm("请先上传图片")
        this.btm = true
      }
    },
		handleChange(value){
			console.log(value)
		},
    saveFootage(){
      if(this.backImg!="") {
        this.$http.post(
            'api/styleChange/save/',
            {
              token: this.$store.state.token,
              type: this.type,
              name: this.imgName,
            }
        ).then(res => {
          this.inputName = false
        })
      }else{
        confirm("请先转换图片")
      }
    },
    download() {
      console.log("下载该id的图片");
      if(this.backImg!="") {

        const fileUrl = this.backImg; // 文件的URL地址
      fetch(fileUrl,{mode: 'no-cors'})
          .then(response => response.blob())
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = this.backImg;
            link.setAttribute('download', `a.png`);
            document.body.appendChild(link);
            link.click();
          })
          .catch(error => {
            console.error(error);
          });
      }else{
        confirm("请先转换图片")
      }
	},

    },
	}
</script>
<style>
	.styleMain {
		display: flex;
		align-items: center;
		background-color: rgb(80, 89, 110);
		width: 100%;
		min-height: 100%;

	}
	
	.styleTitle{
		width: 100%;
		text-align: center;
		font-size: 24px;
		color: white;
		margin-top: -20px;
		margin-bottom: 20px;
		/* display: flex; */
		/* align-items: center; */
	}

  .styleBottom{
    width: 100%;
    text-align: center;
    font-size: 24px;
    color: white;
    /*margin-top: -20px;*/
    /*margin-bottom: 20px;*/
    /* display: flex; */
    /* align-items: center; */
  }

	.upLoadImg {
		height: 500px;
		background-color: #a1a1a1;
		/* 		display: flex;
		align-items: center;
		justify-items: center; */
	}

	.backImg {
		height: 500px;
		background-color: #cfcfcf;
	}

	.styleImg {
		display: flex;
		margin: auto;
		max-height: 100%;
		max-width: 100%;
	}
  .uploadImg {
    max-height: 200px;
    max-width: 200px;
  }
</style>